<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>
    .layui-input-inline {
        width: 400px !important;
    }

    .s {
        clear: both;
        margin-top: 10px
    }

    .upload_more {
        margin: 5px;
        height: 120px;
        width: 120px;
    }

</style>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                        <ul class="layui-tab-title">
                            <li onclick="go('index')">返回项目</li>
                            <li class="layui-this" onclick="location.reload()">施工阶段</li>
                        </ul>
                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px;padding-bottom: 0px">
                            <div class="layui-tab-item layui-show" style="padding-top: 0px">
                                <div class="layui-row">
                                    <div class="layui-col-md12" style="margin-bottom: 0px">

                                        <div class="layui-field-box">
                                            <div class="layui-row">
                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                    <span>
                                                        户主：
                                                    </span>
                                                    <span>
                                                            {foreach name="$res.client" item="it"}
                                                             <b>【{$it.name}】</b>
                                                            {/foreach}
                                                    </span>
                                                </div>


                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                     <span>
                                                       项目经理：
                                                    </span>
                                                    <span>
                                                            {$res.pm}
                                                    </span>
                                                </div>


                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                     <span>
                                                        户型：
                                                    </span>
                                                    <span>
                                                       {$res.house_type}
                                                    </span>
                                                </div>
                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                     <span>
                                                        客户经理：
                                                    </span>
                                                    <span>
                                                      {$res.am}
                                                    </span>
                                                </div>
                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                     <span>
                                                        项目地址：
                                                    </span>
                                                    <span>
                                                      {$res.address}
                                                    </span>
                                                </div>


                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                     <span>
                                                        设计师：
                                                    </span>
                                                    <span>
                                                      {$res.ds}
                                                    </span>
                                                </div>
                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                     <span>
                                                        面积：
                                                    </span>
                                                    <span>
                                                      {$res.area}m²
                                                    </span>
                                                </div>

                                                <div class="layui-col-md6" style="margin-bottom: 5px">
                                                     <span>
                                                        质检：
                                                    </span>
                                                    <span>
                                                      {$res.qc}
                                                    </span>
                                                </div>


                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">

                    <div class="layui-card-header">
                        项目图纸
                    </div>

                    <div class="layui-card-body">

                        <div class="  ">
                            <div class="layui-upload-drag upload_more check" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;width: 80px" class="layui-elip">
                                    平面及建筑标记图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.biaoji}"
                                     src="{$qn_domain}/{$tuzhi.biaoji}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">

                            </div>

                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    原始尺寸测量图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.celiang}"
                                     src="{$qn_domain}/{$tuzhi.celiang}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">

                            </div>

                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    墙体拆改图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.chaigai}"
                                     src="{$qn_domain}/{$tuzhi.chaigai}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">


                            </div>


                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    平面布局图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.buju}"
                                     src="{$qn_domain}/{$tuzhi.buju}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">



                            </div>


                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    地面材质示意图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"

                                     data_src="{$qn_domain}/{$tuzhi.shiyi}"
                                     src="{$qn_domain}/{$tuzhi.shiyi}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">



                            </div>



                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    顶面天花布局图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.dingmian}"
                                     src="{$qn_domain}/{$tuzhi.dingmian}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">


                            </div>

                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    顶面天花尺寸图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.dingmian_chichun}"

                                     src="{$qn_domain}/{$tuzhi.dingmian_chichun}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">


                            </div>


                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    开关面板示意图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.kaiguan}"
                                     src="{$qn_domain}/{$tuzhi.kaiguan}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">



                            </div>

                            <div class="layui-upload-drag upload_more " style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    墙面装饰布局图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.qiangmian}"
                                     src="{$qn_domain}/{$tuzhi.qiangmian}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">



                            </div>




                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    平面索引图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.suoyin}"
                                     src="{$qn_domain}/{$tuzhi.suoyin}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">



                            </div>




                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    立面图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.limian}"
                                     src="{$qn_domain}/{$tuzhi.limian}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">



                            </div>

                            <div class="layui-upload-drag upload_more" style="padding: 2px;"
                                 onclick="checkTuzhi(this)">
                                <div style="margin-top: 5px;" class="layui-elip">
                                    剖面图
                                </div>
                                <img class="layui-upload-img"
                                     style="width: 80px;height: 80px; object-fit: cover;"
                                     data_src="{$qn_domain}/{$tuzhi.paomian}"
                                     src="{$qn_domain}/{$tuzhi.paomian}?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/quality/80/interlace/0">


                            </div>

                        </div>


                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">

                    <div class="layui-card-header">
                        施工阶段
                    </div>

                    <div class="layui-card-body">

                            <table class="layui-table" lay-skin="line">

                                <thead>
                                <tr>
                                    <th>阶段</th>
                                    <th>时间</th>
                                    <th>工种</th>
                                    <th>工人</th>
                                    <th>材料订单</th>
                                    <th>施工日志</th>
                                    <th>验收管理</th>
                                    <th>状态</th>
                                    <th style="width: 20%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in items" :data_id="item.id">
                                    <td>
                                        <a href="#" ><b>{{item.title}}</b></a>
                                    </td>
                                    <td>{{item.start_time}}</td>
                                    <td><a href="#" onclick="workert_list(this)" style="color:#009688"
                                           :data_id="item.id" :data_w="item.worker_type">查看</a></td>
                                    <td><a href="#" onclick="worker_list(this)" style="color:#009688"
                                           :data_id="item.id">查看</a></td>
                                    <td><a href="#" onclick="material_list(this)" style="color:#009688"
                                           :data_id="item.id">查看</a></td>
                                    <td><a href="#" onclick="log(this)" style="color:#009688" :data_id="item.id">查看</a>
                                    </td>
                                    <td><a href="#" onclick="yanshou(this)" style="color:#009688" :data_id="item.id">查看</a>
                                    </td>
                                    <td v-if="item.status == 0">待发布</td>
                                    <td v-if="item.status == 1">竞标中</td>
                                    <td v-if="item.status == 2">施工中</td>
                                    <td v-if="item.status == 3">已完成</td>
                                    <td>

                                        <button class="layui-btn layui-btn-sm " style="display: block;margin-bottom: 5px"
                                                @click="go(item.id)" :data_id="item.id"
                                                :data_index="index">施工详情
                                        </button>

                                        <div class="layui-btn-group">
                                            <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                    v-if="item.operate_item !='无'"
                                                    onclick="operate(this)" :data_id="item.id"
                                                    :data_index="index"
                                                    :data_op="item.operate_item">
                                                {{item.operate_item}}
                                            </button>
                                            <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                    onclick="edit(this)" :data_id="item.id"
                                                    :data_index="index">编辑
                                            </button>
                                            <button class="layui-btn layui-btn-sm layui-btn-primary"
                                                    onclick="del(this)" :data_id="item.id"
                                                    :data_index="index">删除
                                            </button>
                                        </div>


                                    </td>

                                </tr>
                                </tbody>
                            </table>

                            <div style="text-align: center;width: 100%;margin: 20px">
                                <button onclick="add()" class="layui-btn"><i
                                        class="layui-icon">&#xe654;</i> 新阶段
                                </button>
                            </div>


                    </div>
                </div>
            </div>
        </div>

    </div>
</div>



<script>


    var app = new Vue({
        el: '#app',
        data: {
            items: [],
        },
        methods: {

            go: function (id) {
               location.href="stage_detail?id="+id;
            }

        },
    });


    function init() {

        var id = "{:input('id')}";
        $.get('get_stage',{id:id},function (res) {
            if(res.code!=1){
                return false;
            }
            app.items = res.data;
            app.items.forEach(function (item, index) {
                if (item.status == 0) {
                    Vue.set(item, 'operate_item', '无');
                }
                if (item.status == 1) {
                    Vue.set(item, 'operate_item', '结束竞标');
                }
                if (item.status == 2) {
                    Vue.set(item, 'operate_item', '完成');
                }
                if (item.status == 3) {
                    Vue.set(item, 'operate_item', '无');
                }
            });

        });



    }


    $(function () {
        init();
    });
    layui.use(['table', 'layer'], function () {
        var layer = layui.layer;
        var table = layui.table;

//        layer.photos({
//            photos:  '.upload_more' //格式见API文档手册页
//            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
//        });



    });
    function del(that) {
        var data_id = $(that).attr('data_id');
        var data_index = $(that).attr('data_index');

        var index = layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("del_stage")}', {id: data_id}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1})
                    app.items.splice(data_index, 1);
                }
                layer.close(index);
            });
        }, function () {
            layer.close(index);
        });
    }
    function edit(that) {
        //项目id，为了从编辑返回
        var id = "{$Request.param.id}";
        //阶段id
        var data_id = $(that).attr('data_id');
        var path = "{:url('edit_stage')}?id=" + data_id + "&pid=" + id;
        go(path);
    }
    function add() {
        //点击添加时，传递项目id
        var id = "{$Request.param.id}";
        console.log(id);
        var path = "{:url('add_stage')}?id=" + id;

        layer.open({
            type: 2,
            title: '新的施工',
            shadeClose: false,
            shade: 0.01,
            area: ['90%', '90%'],
            content: path
        });


    }
    function material_list(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '材料',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('select_material_list')}?id=" + data_id
        });
    }
    function workert_list(that) {
        var data_id = $(that).attr('data_id');
        layer.open({
            type: 2,
            title: '工种',
            shadeClose: true,
            shade: 0.01,
            area: ['50%', '50%'],
            content: "{:url('worker_type_list')}?id=" + data_id
        });
    }
    function worker_list(that) {
        var data_id = $(that).attr('data_id');
       // console.log("cn"+data_id);
        layer.open({
            type: 2,
            title: '工人',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('project_worker')}?id=" + data_id
        });
    }
    function operate(that) {
        var status = 0;
        var data_id = $(that).attr('data_id');
        var data_op = $(that).attr('data_op');
        if (data_op == "结束竞标") {
            status = 2;
        }
        if (data_op == "完成") {
            status = 3;
        }
        var index = layer.confirm('确认继续执行？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.post('{:url("stage_status")}', {id: data_id, status: status}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1});
                    location.reload();
                }
                layer.close(index);
            });
        }, function () {
            layer.close(index);
        });
    }
    function yanshou(that) {
        var data_id = $(that).attr('data_id');
        console.log(data_id);
        layer.open({
            type: 2,
            title: '验收管理',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('yanshou')}?id=" + data_id
        });
    }
    function log(that) {
        var data_id = $(that).attr('data_id');

        layer.open({
            type: 2,
            title: '施工日志',
            shadeClose: true,
            shade: 0.01,
            area: ['80%', '80%'],
            content: "{:url('stage_log')}?id=" + data_id
        });
    }

    //图片预览
    function checkTuzhi(that) {
        var ph=$(that).find('.layui-upload-img').attr('data_src');
        var json={
            "title": "", //相册标题
            "id": 123, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": [   //相册包含的图片，数组格式
                {
                    "alt": "图纸",
                    "pid": 666, //图片id
                    "src": ph, //原图地址
                    "thumb": ph //缩略图地址
                }
            ]
        }
        layer.photos({
            photos: json
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });

    }



</script>
</body>
</html>